<template>
    <div>
        <header>
            <h1>可视化面板展示</h1>
            <div class="showtime">展示当前的事件</div>
        </header>
        <div class="main">
            <div class="left">
                <chart title="柱状图-就业行业">
                    <template v-slot:one>2023</template>
                    <template v-slot:two>2024</template>
                </chart>
            </div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import chart from "../components/chart.vue"
</script>
<style lang="scss">
header {
  position: relative;
  height: 1.25rem;
  background: url(../assets/images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showtime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}
.main{
    padding:.125rem .125rem 0 .125rem;
    display: flex;
    .left,.right{
        flex:3;
    }
    .center{
        flex:5;
    }
}
</style>